<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog" style="width:45%;">
        <el-form :model="addBaseDepartmentForm" ref="addBaseTaskRef" :rules="addBaseDepartmentrules">
            <el-form-item label="部门名称" :label-width="formLabelWidth" prop="name">
                <el-input v-model="addBaseDepartmentForm.name" autocomplete="off" ref="name"
                    placeholder="请填写部门名称"></el-input>
            </el-form-item>
            <!-- <el-form-item label="部⻔序号" :label-width="formLabelWidth" prop="orderNum">
                <el-input v-model="addBaseDepartmentForm.orderNum" autocomplete="off" ref=""
                    placeholder="请填写部⻔序号"></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="类型" :label-width="formLabelWidth" prop="type">
                <el-input v-model="addBaseDepartmentForm.type" autocomplete="off" ref="" placeholder="请填写类型"></el-input>
            </el-form-item> -->
            <el-form-item label="校区" :label-width="formLabelWidth" prop="campus">
                <el-radio-group v-model="addBaseDepartmentForm.campus" @change="changehandler">
                    <el-radio :value="1" :label="1">{{ campusName }}</el-radio>
                    <el-radio :value="2" :label="2">{{ campusName1 }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <!-- <el-form-item label="资产管理员" :label-width="formLabelWidth" prop="content">
                <el-input v-model="addBaseDepartmentForm.leader1" autocomplete="off" ref=""
                    placeholder="请填写资产管理员"></el-input>
            </el-form-item> -->
            <el-form-item label="二级资产会计" :label-width="formLabelWidth" prop="leader2">
                <el-select v-model="addBaseDepartmentForm.leader2" filterable :filter-method="serachTeacher"
                    placeholder="请填写二级资产会计 " style="width:100%" @change="changeTeacher">
                    <el-option v-for="item in teacherList" :key="item.id" :label="item.name"
                        :value="item.teacherNumber" />
                </el-select>
            </el-form-item>

            <el-form-item label="总账会计" :label-width="formLabelWidth" prop="leader3">
                <el-select v-model="addBaseDepartmentForm.leader3" filterable :filter-method="serachTeacher"
                    placeholder="请填写总账会计 " style="width:100%" @change="changeTeacher1">
                    <el-option v-for="item in teacherList" :key="item.id" :label="item.name"
                        :value="item.teacherNumber" />
                </el-select>
            </el-form-item>
            <el-form-item label="主管领导" :label-width="formLabelWidth" prop="leader4">
                <el-select v-model="addBaseDepartmentForm.leader4" filterable :filter-method="serachTeacher"
                    placeholder="请填写主管领导 " style="width:100%" @change="changeTeacher2">
                    <el-option v-for="item in teacherList" :key="item.id" :label="item.name"
                        :value="item.teacherNumber" />
                </el-select>
            </el-form-item>



        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="save()">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";
import { API_BASE_NAME2, API_BASE_NAME3 } from '../../constants';

export default {
    name: "AddBaseAddress",
    components: { ElForm, ElMessage },
    data() {
        return {
            campusName: API_BASE_NAME2,
            campusName1: API_BASE_NAME3,
            dialogFormVisible: ref(false),
            formLabelWidth: "120px",
            title: "",
            personnelType: "",
            id: '',
            teacherList: [],
            addBaseDepartmentForm: {
                id: "",
                parentId: "",
                name: "",
                orderNum: "",
                type: "1",
                campus: "",
                leader1: "",
                leader2: "",
                leader3: "",
                leader4: "",
            },
            // 校验规则
            addBaseDepartmentrules: {
                name: vxRule(true, null, "blur"),
                orderNum: vxRule(true, null, "blur"),
                type: vxRule(true, null, "blur"),
                campus: vxRule(true, null, "blur"),
                leader2: vxRule(true, null, "blur"),
                leader3: vxRule(true, null, "blur"),
                leader4: vxRule(true, null, "blur"),
            },
        };
    },
    methods: {
        changehandler(value) {
            console.log(value);
        },
        closeDialog() {
            this.clear();
        },
        cancel() {
            this.dialogFormVisible = false;
            this.clear();
        },
        getDepartmentById(id) {
            httpService("/javaApi/faDepartment/queryById", { id: id }, "get").then(
                (data) => {
                    console.log(123, data);
                    this.addBaseDepartmentForm = data;
                }
            );
        },
        getBaseTeacherList() {
            httpService(
                "/javaApi/baseTeacher/list/1/10000",
                {},
                "get"
            ).then((data) => {
                this.teacherList = data.list;
            });
        },

        serachTeacher(value) {
            let teacher = ''
            value == undefined ? teacher = '' : teacher = value
            httpService("/javaApi/baseTeacher/list/1/10000", { "name": teacher }, "get").then(
                (data) => {
                    this.teacherList = data.list
                }
            );
        },
        changeTeacher(value) {
            console.log(value);
        },
        changeTeacher1(value) {
            console.log(value);
        },
        changeTeacher2(value) {
            console.log(value);
        },
        clear() {
            this.dialogFormVisible = false;
            //清空form
            this.addBaseDepartmentForm.name = ""
            this.addBaseDepartmentForm.orderNum = ""
            this.addBaseDepartmentForm.type = ""
            this.addBaseDepartmentForm.campus = ""
            this.addBaseDepartmentForm.leader1 = ""
            this.addBaseDepartmentForm.leader2 = ""
            this.addBaseDepartmentForm.leader3 = ""
            this.addBaseDepartmentForm.leader4 = ""
            this.id = ""

        },
        save() {
            console.log(this.addBaseDepartmentForm.leader2, this.addBaseDepartmentForm.leader3, this.addBaseDepartmentForm.leader4,);
            this.$refs.addBaseTaskRef.validate((valid) => {
                if (valid) {
                    let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
                    params.append("name", this.addBaseDepartmentForm.name);
                    params.append("orderNum", this.addBaseDepartmentForm.orderNum);
                    params.append("type", this.addBaseDepartmentForm.type);
                    params.append("campus", this.addBaseDepartmentForm.campus);
                    params.append("leader1", this.addBaseDepartmentForm.leader1);
                    params.append("leader2", this.addBaseDepartmentForm.leader2);
                    params.append("leader3", this.addBaseDepartmentForm.leader3);
                    params.append("leader4", this.addBaseDepartmentForm.leader4);

                    if (this.id) {
                        params.append("id", this.id);
                        httpService("/javaApi/faDepartment/edit", params, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success("修改成功");
                                    this.clear();
                                    this.$parent.getDepartmentList();
                                } else {
                                    ElMessage.error("修改失败");
                                }
                            }
                        );
                    } else {
                        httpService("/javaApi/faDepartment/add", params, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success("添加成功");
                                    this.clear();
                                    this.$parent.getDepartmentList();
                                } else {
                                    ElMessage.error("添加失败");
                                }
                            }
                        );
                    }
                } else {
                    return false;
                }
            });
        },
    },
};
</script>
<style>
.el-dialog__header {
    padding: var(--el-dialog-padding-primary);
    padding-bottom: 10px;
    border-bottom: 1px solid #dedede;
    margin-bottom: 15px;
}
</style>